<template>
  <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>门禁管理</el-breadcrumb-item>
                <el-breadcrumb-item>门卡列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row :gutter="10">
            <el-col :span='6'>
                <el-button v-if='!form.isShow' size="small" type="primary" @click='toAdd'>新增门卡</el-button>
                <el-button v-if='!form.isShow' size="small" type="primary" @click='toBatchBind'>批量绑定</el-button>
                <el-button v-if='!form.isShow' size="small" type="primary" @click='toBatchUnBind'>批量删除</el-button>
                <el-button v-if='form.isShow' size="small" type="primary" @click='form.isShow=false'>返回列表</el-button>
            </el-col>
            <el-col :span='2' v-show='!form.isShow'>
                <el-select size="small" v-model="table.deptId" clearable placeholder="请选择部门" @change='deptChange'>
                    <el-option v-for='item in table.depts' :key='item.deptId' :label="item.name" :value="item.deptId"></el-option>
                </el-select>
            </el-col>
            <el-col :span='4' v-show="!form.isShow">
                <el-input size="small" placeholder="请输入名称或者设备号" suffix-icon="el-icon-search" v-model="table.queryKey" @keyup.enter.native="getTableData"></el-input>
            </el-col>
        </el-row>

        <!--表格-->
        <el-row class="bone-top-10" v-show='!form.isShow'>
            <el-table :data='table.tableData' border stripe style='width:100%' size="small" 
                @expand-change="expandChange"
                :highlight-current-row="true" ref="multipleTable">
                <el-table-column width="150" label="编号" prop='cardId'></el-table-column>
                <el-table-column min-width="200" label="卡号" prop='devId'></el-table-column>
                <el-table-column width="150" label="部门" prop='deptName'></el-table-column>
                <!--展开行表格-->
                <el-table-column type="expand">
                    <template slot-scope="props">
                         <el-table v-if='props.row.doors.length>0' 
                             :data='props.row.doors' border stripe style='width:1051px' size="mini"> 
                            <el-table-column width="80" label="门编号" prop='doorId'></el-table-column>
                            <el-table-column width="100" label="门设备号" prop='doorDevId'></el-table-column>
                            <el-table-column width="100" label="门名称" prop='doorName'></el-table-column>
                            <el-table-column width="120" label="开放时间名称" prop='openTimeName'></el-table-column>
                            <el-table-column width="150" label="绑定时间" prop='bindTime'></el-table-column>
                            <el-table-column width="100" label="到期时间" prop='expireTime'></el-table-column>
                            <el-table-column width="150" label="时间段">
                                <template slot-scope='ss'>
                                    <span>{{ss.row.timePickerStart}} - {{ss.row.timePickerEnd}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column width="150" label="星期" prop='weekday'></el-table-column>
                            <el-table-column width="100" label="识别方式" prop='opModeStr'></el-table-column>
                         </el-table>
                         <span v-else>还未绑定门</span>
                    </template>
                </el-table-column>
                <el-table-column width="200" label="门" show-overflow-tooltip>
                    <template slot-scope='scope'>
                        <span v-for='door in scope.row.doors' :key="door.doorId"> {{door.doorName}} </span>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="绑定人员" prop='empName'></el-table-column>
                <el-table-column width="150" label="创建时间" prop='createTime'></el-table-column>
                <el-table-column fixed='right' min-width="200" label="操作">
                    <template slot-scope='scope'>
                        <span v-if='form.deptId==scope.row.deptId'>
                            <el-button type="text" @click='modify(scope.row)'>修改</el-button>
                            <el-button type="text" @click='toDel(scope.row.cardId)'>删除</el-button>
                            <el-button type='text' v-if="scope.row.empName==''" @click="toBindEmp(scope.row.cardId)">绑定人员</el-button>
                            <el-button type='text' v-else @click="toUnBindEmp(scope.row.cardId)">解绑人员</el-button>
                            <el-button type="text" @click='toBindDoor(scope.row)'>绑定门</el-button>
                        </span>
                        <span style='margin-left: 10px;'>
                            <el-button type='text' @click='lookEvent(scope.row.cardId)'>查看事件</el-button>
                        </span>
                        
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination' @current-change="handleCurrentChange" 
            :current-page="this.table.currentPage" :page-size="this.table.pageSize" 
            layout="total, prev, pager, next, jumper" :total="this.table.rowCount"/>
        </el-row>


        <!--表单-->
        <el-row class="bone-top-10" v-show='form.isShow'>
            <el-col :span='6'>
                <el-card>
                    <div slot='header'>
                        <span>{{form.formTitle}}</span>
                    </div>
                    <el-form :model="form" :rules="form.rules" ref='form' size='small' label-width="80px" label-position="right">
                        <el-form-item label="设备号" prop='devId'>
                            <el-input v-model="form.devId" placeholder="请输入设备名称"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button  @click="submitForm('form')" type="primary" :disabled='form.submitDisabled'>保存</el-button>
                            <el-button  @click="form.isShow=false" type="primary">返回</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>

        <!--绑定员工弹窗-->
        <el-dialog title='绑定员工' :visible.sync="bindEmp.dialog" width='33%'>
            <el-radio-group v-model="bindEmp.empId">
                <template v-for='(item,index) in bindEmp.emps'>
                    <template v-if='index!=0&&index%4==0'>
                       <div style="margin-top: 10px" :key='item.empId'>
                       </div>
                    </template>
                    <el-radio :key='item.empId' :label="item.empId" border size="small">{{item.empName}}</el-radio>
                </template>
            </el-radio-group>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="bindEmp.dialog = false">取 消</el-button>
                <el-button size="small" type="primary" @click="goBindEmp">确 定</el-button>
            </span>
        </el-dialog>

        <!--绑定门弹窗-->
        <el-dialog title='绑定门' :visible.sync="bindDoor.dialog" width='35%'
        :close-on-click-modal='false'
        :close-on-press-escape='false'>
            <el-checkbox-group v-model="bindDoor.doorIdList">
                <template v-for='(item,index) in bindDoor.doors'>
                    <el-checkbox class='item-float' border size='small' :label="item.doorId" :key="item.doorId">{{item.doorName}}</el-checkbox>
                </template>
            </el-checkbox-group>
            <el-row style="margin-top:20px;">
                <el-form :model="bindDoor.timeForm" :rules="bindDoor.timeForm.rules" 
                    ref='timeForm' size='small' label-width="80px" label-position="right">
                    <el-form-item label="过期时间" prop='expireTime'>
                        <el-date-picker style='width:350px;' class="expireTime"
                            v-model='bindDoor.timeForm.expireTime'
                            :clearable = false
                            :editable = false
                            value-format='yyyy-MM-dd'
                            type="date"
                            size='small'
                            placeholder="过期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="时间段">
                        <el-time-picker
                            is-range
                            v-model="bindDoor.timeForm.timePicker"
                            :clearable = false
                            :editable = false
                            value-format='HH:mm:ss'
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            placeholder="选择时间范围">
                        </el-time-picker>
                    </el-form-item>
                    <el-form-item label="星期">
                         <el-checkbox-group v-model="bindDoor.timeForm.weekday" :min='1'>
                            <el-checkbox :label="1" key='1'>星期一</el-checkbox>
                            <el-checkbox :label="2" key='2'>星期二</el-checkbox>
                            <el-checkbox :label="3" key='3'>星期三</el-checkbox>
                            <el-checkbox :label="4" key='4'>星期四</el-checkbox>
                            <br/>
                            <el-checkbox :label="5" key='5'>星期五</el-checkbox>
                            <el-checkbox :label="6" key='6'>星期六</el-checkbox>
                            <el-checkbox :label="7" key='7'>星期日</el-checkbox> 
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="bindDoor.dialog = false">取 消</el-button>
                <el-button size="small" :disabled='bindDoor.submitDisabled' type="primary" @click="goBindDoor">确 定</el-button>
            </span>
        </el-dialog>

        <!--批量绑定弹窗-->
        <el-dialog title='批量绑定' :visible.sync='batchBind.dialog' width='1100px'
        :fullscreen='false' :close-on-click-modal='false'
        :close-on-press-escape='false'>
            <el-row :gutter='10'>
                <el-col :span='8'>
                    <el-card>
                        <div slot="header">
                            <span>门</span>
                        </div>
                        <div>
                            <el-checkbox-group v-model="batchBind.doorIdList">
                                 <template v-for='(item,index) in batchBind.doors'>
                                    <el-checkbox border size='small' class='item-float' 
                                    :label="item.doorId" :key="item.doorId">{{item.doorName}}</el-checkbox>
                                </template>
                            </el-checkbox-group>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span='8'>
                    <el-card>
                        <div slot="header">
                            <span>门卡</span>
                        </div>
                        <div>
                            <el-checkbox-group v-model="batchBind.cardIdList">
                                 <template v-for='(item,index) in batchBind.cards' >
                                    <el-checkbox border size='small' :label="item.cardId" class='item-float'
                                    :key="item.cardId">{{item.cardDevId}}</el-checkbox>
                                </template>
                            </el-checkbox-group>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span='8'>
                    <el-card>
                        <div slot="header">
                            <span>时间段</span>
                        </div>
                        <div>
                            <el-form :model="batchBind.timeForm" 
                                ref='timeForm' size='small' label-width="80px" label-position="right">
                                <el-form-item label="过期时间" prop='expireTime'>
                                    <el-date-picker style='width:100%;' class="expireTime"
                                        v-model='batchBind.timeForm.expireTime'
                                        :clearable = 'false'
                                        :editable = 'false'
                                        value-format='yyyy-MM-dd'
                                        type="date"
                                        size='small'
                                        placeholder="过期时间">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="时间段">
                                    <el-time-picker
                                        style='width:100%;'
                                        is-range
                                        v-model="batchBind.timeForm.timePicker"
                                        :clearable = 'false'
                                        :editable = 'false'
                                        value-format='HH:mm:ss'
                                        range-separator="至"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        placeholder="选择时间范围">
                                    </el-time-picker>
                                </el-form-item>
                                <el-form-item label="星期">
                                    <el-checkbox-group v-model="batchBind.timeForm.weekday" :min='1'>
                                        <el-checkbox border size='small' class='item-float' :label="1" key='1'>星期一</el-checkbox>
                                        <el-checkbox border size='small' class='item-float' :label="2" key='2'>星期二</el-checkbox>
                                        <el-checkbox border size='small' class='item-float' :label="3" key='3'>星期三</el-checkbox>
                                        <el-checkbox border size='small' class='item-float' :label="4" key='4'>星期四</el-checkbox>
                                        <el-checkbox border size='small' class='item-float' :label="5" key='5'>星期五</el-checkbox>
                                        <el-checkbox border size='small' class='item-float' :label="6" key='6'>星期六</el-checkbox>
                                        <el-checkbox border size='small' class='item-float' :label="7" key='7'>星期日</el-checkbox> 
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="batchBind.dialog = false">取 消</el-button>
                <el-button size="small" type="primary" @click="goBatchBind">确 定</el-button>
            </span>
        </el-dialog>

        <!--批量删除弹窗-->
        <el-dialog title="批量删除" :visible.sync='batchUnbind.dialog'
            :fullscreen='false' width='1100px'
            :close-on-click-modal='false'
            :close-on-press-escape='false'
            >
            <el-row>
                <el-button size="small" type="primary" @click="goBatchDelete">删除</el-button>
            </el-row>
            <el-row class="bone-top-10">
                <el-table :data='batchUnbind.table.tableData' border stripe style='width:100%' size="small"
                :highlight-current-row="true" ref="bindTable"
                @select='bindTableSelect' 
                @select-all='bindTableSelectAll'
                 >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column width="100" label="编号" prop="bindId"/>
                    <el-table-column min-width="100" label="门卡" prop="cardDevId"/>
                    <el-table-column min-width="100" label="门" prop="doorName"/>
                    <el-table-column width="150" label="创建时间" prop="createTime"/>
                    <el-table-column width="150" label="过期时间" prop="expireTime"/>
                    <el-table-column width="150" label="时间段">
                        <template slot-scope='ss'>
                            <span>{{ss.row.timePickerStart}} - {{ss.row.timePickerEnd}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column width="150" label="星期" prop="weekday"/>
                </el-table>
                <el-pagination class='bone-top-10 my-el-pagination' @current-change="batchUnbindPageChange" 
                    :current-page="this.batchUnbind.table.currentPage" :page-size="this.batchUnbind.table.pageSize" 
                    layout="total, prev, pager, next, jumper" :total="this.batchUnbind.table.rowCount"/>
            </el-row>
        </el-dialog>

        <!--事件弹窗表格-->
        <el-dialog title='事件列表'
        :visible.sync="eventDialog.dialog"
        width='1200px'>
            <el-table :data='eventDialog.tableData'
            border stripe style='width:100%' size="small"
            :highlight-current-row="true" ref="eventDialogTable">
                <el-table-column width="80" label="编号" prop='id'></el-table-column>
                <el-table-column min-width="120" label="门禁" prop='accessName'></el-table-column>
                <el-table-column min-width="120" label="门" prop='doorName'></el-table-column>
                <el-table-column min-width="120" label="部门" prop='deptName'></el-table-column>
                <el-table-column min-width="120" label="门卡" prop='cardDevId'></el-table-column>
                <el-table-column width="100" label="人员" prop='empName'></el-table-column>
                <el-table-column width="80" label="事件">
                    <template slot-scope='scope'>
                        <span v-if='scope.row.doorEvent==1'>进门</span>
                        <span v-if='scope.row.doorEvent==2'>出门</span>
                        <span v-if='scope.row.doorEvent==3'>无效卡</span>
                    </template>
                </el-table-column>
                <el-table-column width="80" label="事件类型">
                    <template slot-scope='scope'>
                        <span v-if='scope.row.eventType==1'>开门</span>
                        <span v-if='scope.row.eventType==2'>关门</span>
                    </template>
                </el-table-column>
                <el-table-column width="80" label="事件触发">
                    <template slot-scope='scope'>
                        <span v-if='scope.row.trigger==1'>门卡</span>
                        <span v-if='scope.row.trigger==2'>地图</span>
                        <span v-if='scope.row.trigger==3'>其他</span>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="时间" prop='createTime'></el-table-column>
            
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination'
                @current-change="handleEventDialogChange" 
                :current-page="this.eventDialog.currentPage" 
                :page-size="this.eventDialog.pageSize" 
                :total="this.eventDialog.rowCount"
                layout="total, prev, pager, next, jumper">
            </el-pagination>
        </el-dialog>
  </div>
</template>
<script>
import Http from "@/components/utils/httpUtil";
export default {
  data(){
      return {
          form: {
            isShow:false,
            deptId: '',
            devId: '',
            cardId: '',
            submitDisabled: false,
            isCreate: true,
            rules: {
                devId: [
                    {
                        required: true, 
                        message: '请输入设备号',
                        trigger: 'blur'
                    }
                ]
            }
          },
          table:{
            deptId: '',
            queryKey: '',
            depts: [],
            tableData: [],
            rowCount: 0,
            currentPage:1,
            pageSize:10,
            expandRowId: '',    //行展开记录
            reflash: false
          },
          bindEmp:{
              emps:[],
              dialog: false,
              empId: '',
              cardId: ''
          },
          bindDoor: {
              doors:[],
              dialog: false,
              cardId: '',
              doorIdList: [],
              submitDisabled: false,
             
              timeForm:{
                 expireTime: '2020-01-01',
                 timePicker:['00:00:00','23:59:59'],
                 weekday:[1,2,3,4,5,6,7],
              }
          },
          batchBind:{
            dialog: false,
            doors:[],
            doorIdList: [],
            cards:[],
            cardIdList: [],
            submitDisabled: false,
            timeForm:{
                 expireTime: '2020-01-01',
                 timePicker:['00:00:00','23:59:59'],
                 weekday:[1,2,3,4,5,6,7],
            }
          },
          batchUnbind: {
            dialog: false,
            table:{
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                rowCount: 0
            },
            toDelId: [],
          },
          eventDialog: {
              dialog: false,
              tableData: [],
              currentPage: 1,
              pageSize: 10,
              rowCount: 0,
              cardId: ''
          }
      }
  },
  methods:{
    //初始化
    init(){
        let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.form.deptId = userInfo.deptId
    },
    //添加门卡界面
    toAdd(){
        this.$refs.form.clearValidate()
        this.form.isShow = true
        this.form.isCreate = true
        this.form.formTitle = '新增门卡'
        this.form.devId = ''
    },
    //修改门卡界面
    modify(row){
        this.$refs.form.clearValidate()
        this.form.isShow = true
        this.form.isCreate = false
        this.form.formTitle = '修改门卡'
        this.form.devId = row.devId
        this.form.cardId = row.cardId
    },
    //获取表格数据
    getTableData(){
        let p = {};
        let url = '/doorCard/listQuery'
        p.start = (this.table.currentPage - 1) * this.table.pageSize;
        p.num = this.table.pageSize;
        p.key = this.table.queryKey;
        p.deptId = this.table.deptId
        Http.fetch(url, p)
        .then(res => {
            this.table.tableData = res.data.rows;
            this.table.rowCount = res.data.total;

            console.log('刷新表格')
            //如果行是展开的.刷新后重新展开.如果没有找到.清空展开记录
            if(this.table.expandRowId){

                this.table.reflash = true
                console.log('行是展开的')
                let currentRow
                this.table.tableData.forEach(row=>{
                    if(row.cardId == this.table.expandRowId){
                        currentRow = row;
                    }
                })
                if(currentRow){
                    console.log('找到了对应的行')
                    this.$refs.multipleTable.toggleRowExpansion(currentRow, true);
                }else{
                    console.log('找不到对应的行')
                    this.table.expandRowId = ''
                }
                this.table.reflash = false
            }
        })
    },
    
    //table翻页
    handleCurrentChange(val) {
        this.table.currentPage = val;
        this.getTableData();
    },
    //获取部门下拉列表
    getDeptData(){
        let p = {};
        Http.fetch('/dept/listTree',p)
        .then(res=>{
            this.table.depts = res.data;
        })
    },
    //部门下拉切换
    deptChange(){
        this.getTableData();
    },
    
    //删除门卡
    toDel(cardId){
        this.$confirm('确定删除该门的绑定吗?','提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        .then(()=>{
            let p = {}
            let url = '/doorCard/toDel'
            p.cardId = cardId
            return Http.fetch(url,p)
        })
        .then(res=>{
            this.$message({
                showClose: true,
                message: res.sucMsg,
                type: "success"
            });
            this.getTableData()
        })
        .catch(err=>{
            if(err!='cancel'){
                this.$message({
                    showClose: true,
                    message: err.errMsg,
                    type: "error"
                });
            }
        })
    },
    
    //添加/修改 提交表单
    submitForm(formName){
        this.$refs[formName].validate(valid=>{
            if(valid){
                this.form.submitDisabled = true
                let p = {}
                let url = '/doorCard/add'
                if(!this.form.isCreate){
                    p.cardId = this.form.cardId
                    url = '/doorCard/modify'
                }
                p.devId = this.form.devId
                p.deptId = this.form.deptId
                Http.fetch(url,p)
                .then(res=>{
                    this.getTableData()
                    this.form.isShow = false
                    this.form.submitDisabled = false
                    this.$message({
                        showClose: true,
                        message: res.sucMsg,
                        type: "success"
                    });
                })
                .catch(err=>{
                    this.$message({
                        showClose: true,
                        message: err.errMsg,
                        type: "error"
                    });
                    this.form.submitDisabled = false
                })
            }
        })
    },
    //绑定员工界面
    toBindEmp(cardId){
        let p = {}
        let url = '/doorCard/listUnBindEmp'
        Http.fetch(url,p)
        .then(res=>{
            if(res.data.length==0){
                this.$message({
                    showClose: true,
                    message: '本部门所有员工都绑定了门卡',
                    type: "error"
                });
            }else{
                this.bindEmp.emps = res.data
                this.bindEmp.dialog = true
                this.bindEmp.empId = ''
                this.bindEmp.cardId = cardId
            }
        })
        .catch(err=>{
            this.$message({
                showClose: true,
                message: err.errMsg,
                type: "error"
            });
        })
    },
    //绑定员工 - 提交数据
    goBindEmp(){
        if(!this.bindEmp.empId){
            this.$message({
                showClose: true,
                message: '还未选择绑定的人员',
                type: "error"
            });
        }
        //发送请求,绑定人员和门卡
        else{
            let p = {}
            let url = '/doorCard/bindEmp'
            p.empId = this.bindEmp.empId
            p.cardId = this.bindEmp.cardId
            Http.fetch(url,p)
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: res.sucMsg,
                    type: "success"
                });
                this.bindEmp.dialog = false
                this.getTableData()
            })
            .catch(err=>{
                this.$message({
                    showClose: true,
                    message: err.errMsg,
                    type: "error"
                });
            })
        }
    },
    //解绑员工 - 提交数据
    toUnBindEmp(cardId){

        this.$confirm('确定解绑该门卡的员工吗?','提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        .then(()=>{
            let p = {}
            let url = '/doorCard/unBindEmp'
            p.cardId = cardId
            return Http.fetch(url,p)
        })
        .then(res=>{
            this.$message({
                showClose: true,
                message: res.sucMsg,
                type: "success"
            });
            this.getTableData()
        })
        .catch(err=>{
            if(err!='cancel'){
                this.$message({
                    showClose: true,
                    message: err.errMsg,
                    type: "error"
                });
            }
        })
    },
    //绑定门 - 界面
    toBindDoor(row){
        let p = {}
        let url = '/door/listAll'
        Http.fetch(url,p)
        .then(res=>{
            this.bindDoor.doorIdList = []
            this.bindDoor.doors = res.data
            this.bindDoor.cardId = row.cardId
            this.bindDoor.dialog = true
        })
    },
    //绑定门 - 提交数据
    goBindDoor(){

        //先禁用提交按钮
        this.bindDoor.submitDisabled = true

        let p = {}
        let url = '/doorCard/bindDoor'
        p.cardId = this.bindDoor.cardId
        p.doorIdList = this.bindDoor.doorIdList
        p.expireTime = this.bindDoor.timeForm.expireTime
        p.timePicker = this.bindDoor.timeForm.timePicker
        p.weekday = this.bindDoor.timeForm.weekday
        Http.fetch(url,p)
        .then(res=>{
            this.$message({
                showClose: true,
                message: res.sucMsg,
                type: "success"
            });
            this.getTableData()
            this.bindDoor.dialog = false
            this.bindDoor.submitDisabled = false
        })
        .catch(err=>{
            this.$message({
                showClose: true,
                message: err.errMsg,
                type: "error"
            });
            this.bindDoor.submitDisabled = false
        })
    },
    //解绑门
    unBindDoor(bindId,cardId){
        this.$confirm('确定删除该门的绑定吗?','提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(()=>{
            let p = {}
            let url = '/doorCard/unBindDoor'
            p.bindId = bindId
            return Http.fetch(url,p)
        }).then(res=>{
            this.$message({
                showClose: true,
                message: res.sucMsg,
                type: "success"
            });
            this.getTableData()
        })
        .catch(err=>{
            if(err!='cancel'){
                this.$message({
                    showClose: true,
                    message: err.errMsg,
                    type: "error"
                });
            }
        })
    },
    /*
     * 展开/关闭 行触发事件
     * 会先调用关闭的触发事件,再调用展开的触发事件
     */
    expandChange(row, expandedRows) {

        //如果是表格刷新触发,不管
        if(this.table.reflash){
            return;
        }

        //表格记录的展开行是空
        if(!this.table.expandRowId){
            console.log('空')
            this.table.expandRowId = row.cardId
        }else{
            //只要不是空的,就要把上一行关闭
            let currentRow
            this.table.tableData.forEach(item=>{
                if(item.cardId == this.table.expandRowId){
                    currentRow = item
                    return
                }
            })
            this.$refs.multipleTable.toggleRowExpansion(currentRow, false);

            if(this.table.expandRowId==row.cardId){
                console.log(`同样的一行,清除${this.table.expandRowId} -- ${row.cardId}`)
                this.table.expandRowId = ''
            }else{
                console.log(`不同的行,替换${this.table.expandRowId} -- ${row.cardId}`)
                this.table.expandRowId = row.cardId
            }
        }
    },

    //批量绑定 - 界面
    toBatchBind(){
        //获取本部门所有的门
        let p = {}
        let url = '/door/listAll'
        Http.fetch(url,p)
        .then(res=>{
            this.batchBind.doors = res.data
            url = '/doorCard/listAll'
            return Http.fetch(url,p)
        })
        .then(res=>{
            console.log('cards',res)
            this.batchBind.cards = res.data
            this.batchBind.doorIdList = []
            this.batchBind.cardIdList = []
            //数据获取完成后再显示出弹窗
            this.batchBind.dialog = true
        })
    },
    //批量绑定 - 提交
    goBatchBind(){
        this.batchBind.submitDisabled = true
        let p = {}
        let url = '/doorCard/batchBind'
        p.cardIdList = this.batchBind.cardIdList
        p.doorIdList = this.batchBind.doorIdList
        p.expireTime = this.batchBind.timeForm.expireTime
        p.timePicker = this.batchBind.timeForm.timePicker
        p.weekday = this.batchBind.timeForm.weekday
        Http.fetch(url,p)
        .then(res=>{
            this.$message({
                showClose: true,
                message: res.sucMsg,
                type: "success"
            });
            this.getTableData()
            this.batchBind.dialog = false
            this.batchBind.submitDisabled = false
        })
        .catch(err=>{
            this.$message({
                showClose: true,
                message: err.errMsg,
                type: "error"
            });
            this.batchBind.submitDisabled = false
        })
    },
    //批量删除 - 界面
    toBatchUnBind(){
        this.getUnBindTableData();
        this.batchUnbind.toDelId = []
        this.batchUnbind.dialog = true
    },

    //批量删除弹窗表格翻页
    batchUnbindPageChange(val){
        this.batchUnbind.table.currentPage = val;
        this.getUnBindTableData();
    },
    //批量删除,表格获取数据
    getUnBindTableData(){
        let p = {}
        let url = '/doorCard/listBindTable'
        p.start = (this.batchUnbind.table.currentPage - 1) 
            * this.batchUnbind.table.pageSize
        p.num = this.batchUnbind.table.pageSize
        Http.fetch(url,p)
        .then(res=>{
            this.batchUnbind.table.tableData = res.data.rows
            this.batchUnbind.table.rowCount = res.data.total
        })
    },
    //批量删除 - 提交数据
    goBatchDelete(){
        if(this.batchUnbind.toDelId.length==0){
            this.$message({
                showClose: true,
                message: '还未选择要删除的绑定数据',
                type: "error"
            });
        }else{
            let p = {}
            let url = '/doorCard/batchUnBind'
            p.toDelId = this.batchUnbind.toDelId
            Http.fetch(url,p)
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: res.sucMsg,
                    type: "success"
                });
                this.getUnBindTableData()
                this.getTableData()
            })
        }
    },
    //批量删除列表选择事件
    /**@argument
     * selection 表示当前选中的行数组
     */
    bindTableSelect(selection, row){

        //全部没有选中了
        if(selection.length>0){
            let ids = selection.map(row=>{
                return row.bindId
            })
            this.batchUnbind.toDelId = ids
        }else{
            this.batchUnbind.toDelId = []
        }
    },
    //批量列表全选事件
    bindTableSelectAll(selection){
        //取消全选
        if(selection.length==0){
            this.batchUnbind.toDelId = []
        }else{
            let ids = selection.map(row=>{
                return row.bindId
            })
            this.batchUnbind.toDelId = ids
        }
    },

    //打开查看事件弹窗
    lookEvent(cardId){
        this.eventDialog.cardId = cardId
        this.getEventDialogTableData()
        this.eventDialog.dialog = true
    },
    //获取事件弹窗表格数据
    getEventDialogTableData(){
        let p = {}
        let url = '/doorEvent/listQuery'
        p.start = (this.eventDialog.currentPage - 1) * this.eventDialog.pageSize;
        p.num = this.eventDialog.pageSize;
        p.cardId = this.eventDialog.cardId
        Http.fetch(url,p)
        .then(res=>{
            this.eventDialog.tableData = res.data.rows;
            this.eventDialog.rowCount = res.data.total;
        })
    },

    //事件弹窗表格翻页
    handleEventDialogChange(val){
        this.eventDialog.currentPage = val
        this.getDialogEventTableData()
    }


  },
  mounted(){
    this.init()
    this.getTableData()
    this.getDeptData()
  }
}
</script>

<style > 
    .expireTime .el-input__inner{
        text-align: center !important;
    }
    .item-float{
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .el-checkbox.is-bordered+.el-checkbox.is-bordered {
        margin-left: 0px;
    }
    .el-table__expanded-cell[class*=cell] {
    padding: 10px 10px;
}
</style>
